<template>
  <div>
    <el-button v-if="edit" v-bind="edit" @click="onRowHandle(edit)">{{ edit.name }}</el-button>
    <el-popconfirm
      width="220"
      v-if="del"
      confirm-button-text="确定"
      cancel-button-text="不，谢谢！"
      :icon="InfoFilled"
      icon-color="#626AEF"
      title="您确定删除本条数据吗?"
      @confirm="onRowHandle(del)"
    >
      <template #reference>
        <el-button v-bind="del">{{ del.name }}</el-button>
      </template>
    </el-popconfirm>
    <el-button v-if="look" v-bind="look" @click="onRowHandle(look)">{{ look.name }}</el-button>
    <template v-if="customButtons">
      <el-button
        v-for="(itme, index) in customButtons"
        :key="index"
        v-bind="itme"
        @click="onRowHandle(itme)"
        >{{ itme.name }}</el-button
      >
    </template>
  </div>
</template>

<script lang="ts" setup>
import { toRefs } from 'vue'
import { InfoFilled } from '@element-plus/icons-vue'

const emits = defineEmits(['rowHandle'])
type IGroup = {
  type: string
  name: string
  size: string
  value: string
  icon: string
}
const Props = defineProps({
  edit: {
    type: Object,
    default() {
      return {
        type: 'primary',
        name: '修改',
        size: 'small',
        value: 'edit',
        icon: 'Edit'
      }
    }
  },
  del: {
    type: Object,
    default() {
      return {
        type: 'danger',
        name: '删除',
        size: 'small',
        value: 'del',
        icon: 'Delete'
      }
    }
  },
  look: {
    type: Object,
    default() {
      return {
        type: 'success',
        name: '查看',
        size: 'small',
        value: 'look',
        icon: 'View'
      }
    }
  },
  itmes: {
    type: Object,
    default() {
      return {}
    }
  },
  customButtons: {
    type: Array as unknown as PropType<[IGroup]>,
    default() {
      return []
    }
  }
})
const { edit, del, look, customButtons, itmes } = toRefs(Props)

/**
 * 点击按钮
 * @param row
 */
const onRowHandle = (row: object) => {
  emits('rowHandle', row, itmes)
}
</script>

<style lang="scss" scoped>
.el-table {
  width: 100%;
  .warning-row {
    --el-table-tr-bg-color: var(--el-color-warning-light-9);
  }
  .success-row {
    --el-table-tr-bg-color: var(--el-color-success-light-9);
  }
  .el-table__cell .el-button {
    margin-bottom: 10px;
    margin-left: 0;
    margin-right: 10px;
  }
  .img {
    width: 60px;
    height: 60px;
    margin: 0 auto;
    border-radius: 50%;
  }
}
</style>
